<template>
  <div center>
    <el-form ref="info2" :inline="true" :rules="rules" :model="info" size="mini" label-position="right"
             label-width="110px">
      <el-form-item label="检测类型" prop="jclx">
        <el-input v-model="info.jclx" placeholder="请输入内容" :disabled="true"/>
      </el-form-item>
      <el-form-item label="采样开始日期">
        <el-date-picker
          v-model="info.cyrq"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="采样结束日期">
        <el-date-picker
          v-model="info.cyrqend"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="受监测单位" prop="sjcdwmc">
        <el-input v-model="info.sjcdwmc" placeholder="请输入内容" :disabled="true"/>
      </el-form-item>
      <el-form-item label="检测编号" prop="jcbh">
        <el-input v-model="info.jcbh" placeholder="请输入内容" :disabled="true"/>
      </el-form-item>
      <el-form-item label="工作场所" prop="gzcs">
        <el-input v-model="info.gzcs" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>

      <el-form-item label="气压(kPa)" prop="qy">
        <el-input v-model="info.qy" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="风速(m/s)" prop="fs">
        <el-input v-model="info.fs" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="温度(℃)" prop="wd">
        <el-input v-model="info.wd" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="相对湿度(%)" prop="xdsd">
        <el-input v-model="info.xdsd" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="风向" prop="fx">
        <el-input v-model="info.fx" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>
      <el-form-item label="天气" prop="tq">
        <el-input v-model="info.tq" placeholder="请输入内容" :disabled="isShow"/>
      </el-form-item>

      <el-divider></el-divider>

      <el-form-item v-if="!isShow">
        <el-button type="warning" size="mini" @click="addTable1(null,null)">添加</el-button>
      </el-form-item>
      <el-table key="table1" border :data="info.table1Json" style="width: 100%">
        <el-table-column
          prop="jobWord"
          align="center"
          label="作业岗位">
        </el-table-column>
        <el-table-column
          prop="samplingAddress"
          align="center"
          label="采样（测量）地点/对象">
        </el-table-column>
        <el-table-column
          prop="testItems"
          align="center"
          label="检测项目">
        </el-table-column>
        <el-table-column
          prop="samplingWay"
          align="center"
          label="采样（测量）方式">
        </el-table-column>
        <el-table-column
          prop="samplingTime"
          align="center"
          label="采样（测量）时长">
        </el-table-column>
        <el-table-column
          prop="detectionMethod"
          align="center"
          label="检测依据">
        </el-table-column>
        <el-table-column
          prop="samplingEquipment"
          align="center"
          label="采样设备">
        </el-table-column>
        <el-table-column
          prop="samplesNumber"
          align="center"
          label="采样（测量）数目">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作" v-if="!isShow">
          <template slot-scope="scope">
            <el-button @click="addTable1(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delTable1(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <el-form-item label="定制人" prop="dzr">
        <el-select v-model="info.dzr" :disabled="isShow" multiple placeholder="请选择" :multiple-limit="2">
          <el-option
            v-for="item in userList"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
        <!--        <el-input type="textarea" autosize v-model="info.dzr" placeholder="请输入内容" :disabled="isShow"/>-->
      </el-form-item>
      <el-form-item label="制定日期" prop="dzrq">
        <el-date-picker
          v-model="info.dzrq"
          :disabled="isShow"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核人" prop="shrn">
        <el-select v-model="info.shrn" :disabled="isShow" multiple placeholder="请选择" :multiple-limit="2">
          <el-option
            v-for="item in userList"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="受检单位陪同人" prop="sjdwptr">
        <el-input type="text" autosize v-model="info.sjdwptr" placeholder="打印后手签" disabled/>
      </el-form-item>
      <el-divider></el-divider>
      <!--      <el-form-item label="布点示意图" prop="bdsyt">-->
      <!--        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="info.bdsyt" placeholder="请输入内容"-->
      <!--                  :disabled="isShow"/>-->
      <!--      </el-form-item>-->
      <el-form-item label="布点示意图" prop="bdsytImgJson">
        <imgUpdate v-model="info.bdsytImgJson" :file-key="info.id+'bdsytImgJson'" :max-limit="20"
                   :isDisabled="isShow"/>
      </el-form-item>

    </el-form>
    <el-divider></el-divider>
    <div style="text-align: center" v-if="!isShow">
      <el-button type="primary" size="small" @click="addOrEdit">保存</el-button>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" append-to-body center width="80%">
      <el-form ref="tableInfo" :inline="true" :rules="rules" :model="tableInfo" size="mini" label-position="right"
               label-width="200px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="作业岗位" prop="jobWord">
              <el-input v-model="tableInfo.jobWord" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="采样（测量）地点/对象" prop="samplingAddress">
              <el-input v-model="tableInfo.samplingAddress" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="检测项目" prop="testItems">
              <el-input v-model="tableInfo.testItems" placeholder="请输入内容" @change="findProjectInfo()"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采样（测量）方式" prop="samplingWay">
              <el-select v-model="tableInfo.samplingWay" filterable placeholder="请选择">
                <el-option
                  v-for="item in samplingWayList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采样（测量）时长" prop="samplingTime">
              <el-select v-model="tableInfo.samplingTime" filterable placeholder="请选择" @blur="selectBlurSamplingTime()">
                <el-option
                  v-for="item in samplingTimeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检测依据" prop="detectionMethod">
              <el-input v-model="tableInfo.detectionMethod" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采样设备:" prop="samplingEquipment">
              <el-input v-model="tableInfo.samplingEquipment" placeholder="请输入内容"/>
              <!--              <el-select v-model="tableInfo.samplingEquipment" filterable placeholder="请选择"-->
              <!--                         @blur="selectBlurSamplingEquipment">-->
              <!--                <el-option-->
              <!--                  v-for="item in samplingEquipmentList"-->
              <!--                  :key="item.value"-->
              <!--                  :label="item.label"-->
              <!--                  :value="item.value">-->
              <!--                </el-option>-->
              <!--              </el-select>-->
            </el-form-item>
            <el-form-item label="采样(测量)数目" prop="samplesNumber">
              <el-select v-model="tableInfo.samplesNumber" filterable placeholder="请选择" @blur="selectBlurSamplesNumber">
                <el-option
                  v-for="item in samplesNumberList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
        <el-button type="primary" size="mini" @click="addOrEditTable1">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import imgUpdate from '@/components/Upload/imgUpdate'
import {getProjectItem} from '@/api/table/tableFour';
import {addOrEdit, getInfo} from '@/api/table/tableTwo'
import {getUserList} from '@/api/system/sysUser'
import {getUserId} from '@/utils/auth'
import {getList} from '@/api/system/protectiveWear.js'

export default {
  components: {
    imgUpdate
  },
  props: {
    noCreated: {
      type: Boolean,
      default: null
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      info: {},
      userId: getUserId(),
      samplingWayList: [{
        value: '定点',
        label: '定点'
      }, {
        value: '个体',
        label: '个体'
      }],
      samplesNumberList: [],// 采样数量
      samplingEquipmentList: [],//采样设备
      samplingTimeList: [{
        value: '15',
        label: '15'
      }, {
        value: '30',
        label: '30'
      }, {
        value: '60',
        label: '60'
      }, {
        value: '直读',
        label: '直读'
      }],
      userList: [],
      tableInfo: {
        samplingTime: '15',
        samplesNumber: '1*1*1'
      },
      tableIndex: null,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      rules: {
        dzr: [{required: true, message: '请输入内容', trigger: 'chang'}],
        sjcdwptr: [{required: true, message: '请输入内容', trigger: 'chang'}],
        cyrq: [{required: true, message: '请选择日期', trigger: 'chang'}],
        cyrqend: [{required: true, message: '请选择日期', trigger: 'chang'}],
        dzrq: [{required: true, message: '请选择日期', trigger: 'chang'}],
        shrn: [{required: true, message: '请选择内容', trigger: 'chang'}]
      }
    }
  },
  created() {
    this.getUserList()
    this.info.table1Json = []
    this.getCaiYangNumList()
    this.getFacilityList()
  },
  methods: {
    findProjectInfo() {
      getProjectItem(this.tableInfo.testItems).then(response => {
        if (response.code == 0 && response.data != null) {
          if (response.data.testBasis != null) {
            this.tableInfo.detectionMethod = response.data.testBasis
          }
          if (response.data.cyyq != null) {
            this.tableInfo.samplingEquipment = response.data.cyyq
          }

        }
      })
    },
    // 采样（测量）时长
    selectBlurSamplingTime(e) {
      if (e.target.value) {
        this.tableInfo.samplingTime = e.target.value;
      }
    },
    // 采样设备
    selectBlurSamplingEquipment(e) {
      if (e.target.value) {
        this.tableInfo.samplingEquipment = e.target.value;
      }
    },
    // 采样（测量）数目
    selectBlurSamplesNumber(e) {
      if (e.target.value) {
        this.tableInfo.samplesNumber = e.target.value;
      }
    },
    getFacilityList() {
      getList(3, 1, 1).then(response => {
        if (response.code == 0) {
          this.samplingEquipmentList = []
          response.data.forEach(item => {
            this.samplingEquipmentList.push({
              value: item.name,
              label: item.name
            })
          })
        }
      })
    },
    getCaiYangNumList() {
      getList(2).then(response => {
        if (response.code == 0) {
          this.samplesNumberList = []
          response.data.forEach(item => {
            this.samplesNumberList.push({
              value: item.name,
              label: item.name
            })
          })
        }
      })
    },
    // 新增或编辑表1
    addTable1(index, row) {
      this.tableIndex = index
      this.tableInfo = {
        samplingTime: '15',
        samplingWay: '定点'
      }
      if (row != null) {
        this.tableInfo = row
      } else {
        this.tableInfo = {
          samplesNumber: null,
          samplingEquipment: null,
          detectionMethod: null,
          samplingTime: null,
          samplingWay: null,
          testItems: null,
          jobWord: null,
          samplingAddress: null
        }
      }
      this.centerDialogVisible = true
    },
    // 保存表1
    addOrEditTable1() {
      if (this.tableIndex == null) {
        this.info.table1Json.push(this.tableInfo)
      } else {
        this.info.table1Json.splice(this.tableIndex, 1, this.tableInfo)
      }
      this.centerDialogVisible = false
    },
    // 删除表1
    delTable1(index, row) {
      this.info.table1Json.splice(index, 1)
    },
    // 获取所有用户
    getUserList() {
      getUserList().then(response => {
        this.userList = response.data
      })
    },
    getInfo(id) {
      getInfo(id).then(response => {
        if (response.data.table1Json != null) {
          response.data.table1Json = JSON.parse(response.data.table1Json)
        } else {
          response.data.table1Json = []
        }
        if (response.data.dzr != null) {
          response.data.dzr = JSON.parse(response.data.dzr)
          var ids = []
          for (let i = 0; i < response.data.dzr.length; i++) {
            ids.push(response.data.dzr[i].id)
          }
          response.data.dzr = ids
        } else {
          response.data.dzr = []
        }
        if (response.data.shrn != null) {
          response.data.shrn = JSON.parse(response.data.shrn)
          var ids = []
          for (let i = 0; i < response.data.shrn.length; i++) {
            ids.push(response.data.shrn[i].id)
          }
          response.data.shrn = ids
        } else {
          response.data.shrn = []
        }
        this.info = response.data

      })
    },
    addOrEdit: function () {
      this.$refs['info2'].validate((valid) => {
        if (valid) {
          addOrEdit(this.info.id, this.info.tableOneId, this.info.cyrq, this.info.cyrqend, this.info.gzcs,
            JSON.stringify(this.info.dzr), this.info.dzrq, JSON.stringify(this.info.shrn),
            this.info.sjdwptr, this.info.bdsyt,
            this.info.qy, this.info.fs, this.info.wd, this.info.xdsd, this.info.fx, this.info.tq,
            this.info.bdsytImgJson, JSON.stringify(this.info.table1Json)).then(response => {
            if (this.info.id == null) {
              // 新增
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.$parent.$parent.$parent.$parent.$parent.getData()
            } else {
              // 编辑
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
            response.data.table1Json = JSON.parse(response.data.table1Json)
            if (response.data.dcr != null && response.data.dcr != '') {
              response.data.dcr = JSON.parse(response.data.dcr)
              var ids = []
              for (let i = 0; i < response.data.dcr.length; i++) {
                ids.push(response.data.dcr[i].id)
              }
              response.data.dcr = ids
            }
            this.info = response.data
            this.$parent.$parent.$parent.$parent.$parent.centerDialogVisible = false
          })
        }
      })
    },
    // 初始化
    init(id) {
      this.getInfo(id)
    }
  }
}
</script>

